import React, {useEffect, useState} from 'react';
import { Button } from 'antd';
import './shoppingChart.css'
import {DeleteOutlined,PlusOutlined,MinusOutlined} from "@ant-design/icons";
import Modal from "antd/es/modal/Modal";


function ShoppingCart(props) {

    const [cartList,setCartList]=useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isPayOpen, setIsPayOpen] = useState(false);
    const [newArr,setNewArr]=useState([])

    useEffect(() => {
        setCartList(props.cartList)
    }, [props.cartList]); // 空数组作为依赖，表示仅在组件挂载时执行
    const onDelete=(el)=>{
        setIsModalOpen(true);
        //删除剩余的值
        const arr=cartList.filter((item)=>item.id!==el.id||item.size!==el.size)
        setNewArr(arr)

    }
    //添加衣服数
    const onAdd=(el)=>{
        cartList.forEach((item)=>{
            if(item.id===el.id&&item.size===el.size){
                item.number=item.number+1
            }
        })
        setCartList([...cartList])
        // 调用父组件传递过来的回调函数，并将值传递给它
        props.onChildChange(cartList);
    }

    //减少衣服数
    const onReduce=(el)=>{
        cartList.forEach((item)=>{
            if(item.id===el.id&&item.size===el.size){
                if(item.number>1){
                    item.number=item.number-1
                }else{
                    onDelete(el)
                }

            }
        })
        setCartList([...cartList])
        // 调用父组件传递过来的回调函数，并将值传递给它
        props.onChildChange(cartList);
    }

    const handleOk =()=>{
        setIsModalOpen(false);
        setCartList([...newArr])
        // 调用父组件传递过来的回调函数，并将值传递给它
        props.onChildChange([...newArr]);
    }
    const handleCancel =()=>{
        setIsModalOpen(false);
    }
    //获取数字数组
    const tatal =cartList.map(item=>{
        return item.number*item.price
    })
    //获取购物车总额
    const sum = tatal.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

    const onCheckout =()=>{
        if(cartList.length>0){
            setIsPayOpen(true);
        }
    }
    const handlePayOk=()=>{
        setIsPayOpen(false);
    }
    const handlePayCancel=()=>{
        setIsPayOpen(false);
    }

    return (
        <div style={{width:'100%'}}>
            {cartList.length===0?(
                <div className="countNotData">
                    <span style={{textAlign:'center'}}>Add some products in the cart</span>
                    <span style={{textAlign:'center'}}>:)</span>
                </div>
            ):(
                <div>
                    {
                        cartList.map((item)=>{
                            return(
                                <div className="countData" key={item.id+item.size}>
                                    <img src={require(`../products-images/${item.sku}-1-cart.webp`)} alt="Smiley face" width="67" height="98"/>
                                    <div style={{paddingLeft:10}}>
                                        <div>
                                            <div className="firstLine">
                                                <span className="firstLineName">{item.title}</span>
                                                <DeleteOutlined width='16' height='16' onClick={()=>onDelete(item)}/>
                                            </div>
                                            <div className="secondLine">
                                                <span className="secondLineName">{item.size} | {item.style}</span>
                                                <span className="secondLinePrice">${item.price.toFixed(2)}</span>
                                            </div>
                                        </div>
                                        <div className="firstLine">
                                            <span className="secondLineName">Quantity：{item.number}</span>
                                            <div>
                                                <MinusOutlined style={{width:30,height:30,backgroundColor:'#5B5A5E',justifyContent:'center'}} onClick={()=>onReduce(item)}/>
                                                <PlusOutlined style={{width:30,height:30,backgroundColor:'black',justifyContent:'center'}} onClick={()=>onAdd(item)} />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            )
            }

            <div className="footer">
                <div style={{color:'#FFF',display:'flex',justifyContent:'space-between',height:100}}>
                    <span style={{color:'#5B5A5E'}}>SUBTOTAL</span>
                    <span style={{color:'#EABF00'}}>$ {sum.toFixed(2)}</span>
                </div>
                <Button
                    style={{width:'100%',marginTop:10,backgroundColor:cartList.length===0 ? '#0C0B10':'#EABF00',color: cartList.length===0 ? '#FFF':'#000',borderColor:'#0C0B10',height:48}}
                    onClick={onCheckout}>
                    CHECKOUT
                </Button>
            </div>
            <Modal title="Tips" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p>Are you sure you want to delete it?</p>
            </Modal>
            <Modal title="Checkout" open={isPayOpen} onOk={handlePayOk} onCancel={handlePayCancel}>
                <p>Confirm payment?</p>
            </Modal>
        </div>
    );
}

export default ShoppingCart;